<template>

    <div>
        <Card>
            <p slot="title">{{detailData.name}}</p>
            <div>
                <!--<div>项目名称:{{detailData.project_name}}</div>-->
                <!--<div>功能名称:{{detailData.action__name}}</div>-->
                <!--<div>需求名称:{{detailData.name}}</div>-->
                <div class="topic">需求描述</div>
                    <div v-html="detailData.remark" class="page_body_div"></div>
                <!--<div class="detail">{{detailData.remark}}</div>-->
                <!--<div>紧急程度:{{detailData.urgency_level_text}}</div>-->
                <div v-if="detailData.img_list.length > 0" class="topic" style="padding:16px 16px 16px 0;">需求截图</div>
                <Row class="image">
                    <div v-for="(item,index) in detailData.img_list" :key="index">
                        <Col span="3">
                            <div v-if="item.url && item.url.indexOf('http')===-1" >
                                <a :href="ajaxUrl + '/' + item.url" target="_blank">
                                    <img :src="ajaxUrl + '/' + item.url" alt="需求">
                                </a>

                            </div>
                        </Col>
                    </div>
                </Row>
            </div>
            <div v-if="detailData.complete_date.length > 0" class="topic" style="padding:16px 16px 16px 0;">预计开发时间</div>
            <div >
                <Row style="padding:5px 10px 0 20px">
                    <Col span="3" style="width:150px;">{{detailData.complete_date}}</Col>
                </Row>
            </div>
            <div v-if="demandsDetailData.length > 0" class="topic" style="padding:16px 16px 16px 0;">历史记录</div>
            <div v-for="(item,index) in demandsDetailData" :key="index">
                <Row style="padding:5px 10px 0 20px">
                    <Col span="1" style="width:20px;">{{index + 1}}.</Col>
                    <Col span="3" style="width:150px;">{{item.create_date}}</Col>
                    <Col span="20">
                        <Row>由 <span>{{item.create_user__username}}</span>  <span>{{item.description}}</span></Row>
                        <Row v-if="item.remark">备注信息: {{item.remark}}</Row>
                    </Col>
                </Row>
            </div>
            <Row style="margin:20px 0 0 20px">
                <Button type="warning" @click="closePage">返回</Button>
                <Button v-if="detailData.status===1" type="error" @click="modalCloseDisplay">关闭需求</Button>
                <Button v-if="detailData.status===1" type="success" @click="modalAuditDisplay">审核需求</Button>
                <Button v-if="detailData.status===2 || detailData.status===8" type="info" @click="modalAssessDisplay">时间评估</Button>
                <Button v-if="detailData.status===3" type="info" @click="modalProlongDisplay">延长开发时间</Button>
                <Button v-if="detailData.status===3" type="primary" @click="modalTestDisplay">提交测试</Button>
                <Button v-if="detailData.status===4" type="success" @click="modalCompleteDisplay">需求交付</Button>
                <Button v-if="detailData.status===4" type="error" @click="modalRejectedDisplay">驳回开发</Button>
            </Row>

        </Card>

        <Modal
            v-model="modalAudit"
            title="审核操作"
            width="30%"
            :mask-closable="false"
        >
            <div class="topic mar">请选择开发人员:</div>
            <template>
                <CheckboxGroup v-model="modalData.Audit.checkAllGroup">
                    <Checkbox :label="7" size="large">张聪</Checkbox>
                    <Checkbox  v-for="(item,index) in modalData.Audit.developerList" :label="item.id" size="large" :key="index">{{item.name}}</Checkbox>
                </CheckboxGroup>
            </template>
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Audit.remark" type='textarea' :rows="8" placeholder="请输入审核备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalAudit=false; modalData.Audit.loading=false">取消</Button>
                <Button type="primary" :loading="modalData.Audit.loading" @click="modalAuditFunc">审核通过</Button>
            </div>
        </Modal>

        <Modal
                v-model="modalClose"
                title="关闭需求"
                width="30%"
                :mask-closable="false"
        >
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Close.remark" type='textarea' :rows="8" placeholder="请输入关闭需求的备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalClose=false; modalData.Close.loading=false">取消</Button>
                <Button type="error" :loading="modalData.Close.loading" @click="modalCloseFunc">关闭需求</Button>
            </div>
        </Modal>

        <!--<Modal title="图片预览" v-model="visible" class-name="ivu-modal-wrap-custom" :styles="{'width': '700px'}">-->
            <!--<img :src="imgUrl" style="width: 100%; height: 100%">-->
            <!--<div slot="footer"></div>-->
        <!--</Modal>-->

        <Modal
                v-model="modalAssess"
                title="时间评估"
                width="30%"
                :mask-closable="false"
        >
            <div class="topic">开发完成时间:</div>
            <DatePicker type="datetime" @on-change="assessDateTime" format="yyyy-MM-dd HH:mm" placeholder="请选择预计开发时间" style="width: 200px"></DatePicker>
            <div slot="footer">
                <Button @click="modalAssess=false; modalData.Assess.loading=false">取消</Button>
                <Button type="info" :loading="modalData.Assess.loading" @click="modalAssessFunc">提交</Button>
            </div>
        </Modal>

        <Modal
                v-model="modalProlong"
                title="延长开发时间"
                width="30%"
                :mask-closable="false"
        >
            <div class="topic">延长开发时间:</div>
            <DatePicker type="datetime" @on-change="prolongDateTime" format="yyyy-MM-dd HH:mm" placeholder="请选择延长开发时间" style="width: 200px"></DatePicker>
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Prolong.remark" type='textarea' :rows="8" placeholder="请输入延长开发时间的备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalProlong=false; modalData.Prolong.loading=false">取消</Button>
                <Button type="info" :loading="modalData.Prolong.loading" @click="modalProlongFunc">提交</Button>
            </div>
        </Modal>

        <Modal
                v-model="modalTest"
                title="提交测试"
                width="30%"
                :mask-closable="false"
        >
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Test.remark" type='textarea' :rows="8" placeholder="请输入提交测试的备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalTest=false; modalData.Test.loading=false">取消</Button>
                <Button type="primary" :loading="modalData.Test.loading" @click="modalTestFunc">提交</Button>
            </div>
        </Modal>

        <Modal
                v-model="modalComplete"
                title="需求交付"
                width="30%"
                :mask-closable="false"
        >
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Complete.remark" type='textarea' :rows="8" placeholder="请输入开发完成的备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalComplete=false; modalData.Complete.loading=false">取消</Button>
                <Button type="primary" :loading="modalData.Complete.loading" @click="modalCompleteFunc">提交</Button>
            </div>
        </Modal>

        <Modal
                v-model="modalRejected"
                title="驳回开发"
                width="30%"
                :mask-closable="false"
        >
            <Row>
                <Col span="24">
                    <div class="topic mar">备注信息:</div>
                    <i-input v-model="modalData.Rejected.remark" type='textarea' :rows="8" placeholder="请输入驳回开发的备注信息"></i-input>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="modalRejected=false; modalData.Rejected.loading=false">取消</Button>
                <Button type="primary" :loading="modalData.Rejected.loading" @click="modalRejectedFunc">提交</Button>
            </div>
        </Modal>
    </div>

</template>

<script>
    import imgUpload from './imgUpload';
    import util from '../../../libs/util';
    import qs from 'qs';
    export default {
        name: 'detail',
        props: [
            'projectData',
            'actionData',
            'detailData'
        ],
        components: {
            imgUpload
        },
        data () {
            return {
                model1: '',
                project_id: null,
                demandsDetailData: [], // 需求详情数据
                ajaxUrl: util.ajaxUrl, // 图片头部域名
                visible: false,
                imgUrl: '', // 预览图片存放处
                modalAudit: false, // 是否显示审核模态对话框
                modalAssess: false, // 是否显示评估模态对话框
                modalClose: false, // 是否显示关闭模态对话框
                modalProlong: false, // 是否显示延长开发时间模态对话框
                modalTest: false, // 是否显示提交测试模态对话框
                modalComplete: false, // 是否显示开发完成（需求交付）模态对话框
                modalRejected: false, // 是否显示驳回开发模态对话框
                showActionData: [],
                modalData: {
                    Audit: {
                        loading: false,
                        developerList: [], // 开发人员
                        checkAllGroup: [], // 选中的开发人员id
                        remark: ''
                    },
                    Assess: {
                        loading: false,
                        accessDateTime: '' // 评估开发时间存放
                    },
                    Prolong: {
                        loading: false,
                        prolongDateTime: '', // 延长开发时间存放
                        remark: ''
                    },
                    Close: {
                        loading: false,
                        remark: ''
                    },
                    Test: {
                        loading: false,
                        remark: ''
                    },
                    Complete: {
                        loading: false,
                        remark: ''
                    },
                    Rejected: {
                        loading: false,
                        remark: ''
                    }
                }
            };
        },
        created () {
            // console.log('this.detailData -->', this.detailData);
            // console.log('this.ajaxUrl -->', this.ajaxUrl);
            this.initData();
            this.demandsDetail();
        },
        methods: {
            // 弹出关闭需求模态框
            modalCloseDisplay () {
                this.modalClose = true;
            },
            // 弹出审核模态框
            modalAuditDisplay () {
                this.modalAudit = true;
            },
            // 弹出评估开发时间模态框
            modalAssessDisplay () {
                this.modalAssess = true;
            },
            // 弹出延长开发时间模态框
            modalProlongDisplay () {
                this.modalProlong = true;
            },
            // 弹出提交测试模态框
            modalTestDisplay () {
                this.modalTest = true;
            },
            // 弹出需求交付模态框
            modalCompleteDisplay () {
                this.modalComplete = true;
            },
            // 弹出驳回开发模态框
            modalRejectedDisplay () {
                this.modalRejected = true;
            },
            // 评估时间获取
            assessDateTime (data) {
                console.log('评估时间 -->', data);
                this.modalData.Assess.accessDateTime = data;
            },
            // 延长开发时间获取
            prolongDateTime (data) {
                console.log('评估时间 -->', data);
                this.modalData.Prolong.prolongDateTime = data;
            },
            // // 点击预览图片
            // handleView (imgUrl) {
            //     this.imgUrl = this.ajaxUrl + '/' + imgUrl;
            //     this.visible = true;
            // },
            // 获取开发人员信息
            initData () {
                let _this = this;
                let params = {
                    'length': 0,
                    'get_role_id': 4
                };
                util.ajax.get('api/user', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        console.log('res.data.data.ret_data', res.data.data.ret_data);
                        for (let index in res.data.data.ret_data) {
                            _this.modalData.Audit.developerList.push({name: res.data.data.ret_data[index].username, id: res.data.data.ret_data[index].id});
                        }
                        console.log('_this.modalData.Audit.developerList -->', _this.modalData.Audit.developerList);
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },
            // 获取需求详情
            demandsDetail () {
                let _this = this;
                util.ajax.get('api/demand/detail/' + _this.detailData.id).then(res => {
                    if (res.data.code === 200) {
                        console.log('需求详情-->', res.data.data);
                        _this.demandsDetailData = res.data.data.result_data;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },
            // 点击审核通过时
            modalAuditFunc () {
                let _this = this;
                _this.modalData.Audit.loading = true;
                console.log('点击审核', _this.modalData.Audit.checkAllGroup);
                let params = {
                    'developerList': JSON.stringify(_this.modalData.Audit.checkAllGroup),
                    'remark': _this.modalData.Audit.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/shenhe/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '审核成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 审核失败
                        console.log('审核失败');
                    }
                    _this.modalData.Audit.loading = false;
                });
            },
            // 点击评估开发时间里的提交时
            modalAssessFunc () {
                let _this = this;
                _this.modalData.Assess.loading = true;
                console.log('点击提交');
                let params = {
                    'complete_date': _this.modalData.Assess.accessDateTime
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/update_complete_date/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '提交成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 提交失败
                        console.log('提交失败');
                    }
                    _this.modalData.Audit.loading = false;
                });
            },
            // 点击延长开发时间里的提交时
            modalProlongFunc () {
                let _this = this;
                _this.modalData.Prolong.loading = true;
                console.log('点击提交');
                let params = {
                    'complete_date': _this.modalData.Prolong.prolongDateTime,
                    'remark': _this.modalData.Prolong.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/yanchi_complete_date/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '提交成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 提交失败
                        console.log('提交失败');
                    }
                    _this.modalData.Prolong.loading = false;
                });
            },
            // 点击模态框里的关闭需求时
            modalCloseFunc () {
                let _this = this;
                _this.modalData.Close.loading = true;
                console.log('点击关闭需求');
                let params = {
                    'remark': _this.modalData.Close.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/close/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '关闭需求成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 关闭需求失败
                        console.log('关闭需求失败');
                    }
                    _this.modalData.Close.loading = false;
                });
            },
            // 点击提交测试里的提交时
            modalTestFunc () {
                let _this = this;
                _this.modalData.Test.loading = true;
                console.log('提交测试');
                let params = {
                    'remark': _this.modalData.Test.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/tijiao_ceshi/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '提交测试成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 提交失败
                        console.log('提交失败');
                    }
                    _this.modalData.Test.loading = false;
                });
            },
            // 点击需求交付里的提交时
            modalCompleteFunc () {
                let _this = this;
                _this.modalData.Complete.loading = true;
                console.log('需求交付');
                let params = {
                    'remark': _this.modalData.Complete.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/jiaofu/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '需求交付成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 提交失败
                        console.log('提交失败');
                    }
                    _this.modalData.Complete.loading = false;
                });
            },
            // 点击驳回开发里的提交时
            modalRejectedFunc () {
                let _this = this;
                _this.modalData.Rejected.loading = true;
                console.log('驳回开发');
                let params = {
                    'remark': _this.modalData.Rejected.remark
                };
                console.log('params -->', params);
                util.ajax.post('api/demand/rejected/' + _this.detailData.id, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        _this.$Notice.success({
                            title: '驳回开发成功',
                            duration: 2
                        });
                        _this.closePage();
                    } else {
                        // 提交失败
                        console.log('提交失败');
                    }
                    _this.modalData.Rejected.loading = false;
                });
            },

            closePage () {
                this.$emit('closeDetailPage');
            }
        }
    };
</script>

<style scoped>
    .image{
        border-bottom: 1px solid #e9eaec;
    }
    .image img{
        width:100%;
        height:100%;
        padding:10px;
    }
    .topic {
        display: inline-block;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #1c2438;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mar {
        margin:10px 0 10px 0;
    }
    .detail {
        padding:10px 30px 10px 30px;
        border-bottom: 1px solid #e9eaec;
    }
    .ivu-modal-wrap-custom {
        z-index: 1001;
    }
    .page_body_div image {
        width: 100%;
    }
</style>
